<template>
    <d2-container>
        <el-main>
            <el-form :model="classroomForm" ref="classroomForm" :rules="formRules">

                <el-form-item label="教室名称" prop="name">
                    <el-input placeholder="请输入教室名称" v-model="classroomForm.name" :disabled="disabled"></el-input>
                </el-form-item>

                <el-form-item label="教室编号" prop="room">
                    <el-input placeholder="请输入教室编号" v-model="classroomForm.room" :disabled="disabled"></el-input>
                </el-form-item>

                <el-form-item label="教室人数限制" prop="studentLimit">
                    <el-input
                            placeholder="请输入教室人数限制"
                            min="0"
                            v-model.number="classroomForm.studentLimit"
                            type="number"
                            :disabled="disabled"
                    ></el-input>
                </el-form-item>

                <el-form-item label="所属校区" prop="school">
                    <el-select
                            v-model="classroomForm.school"
                            filterable
                            placeholder="可输入名称搜索"
                            :disabled="disabled"
                    >
                        <el-option v-for="item in schoolList" :key="item._id" :label="item.name"
                                   :value="item._id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

        </el-main>
        <el-footer>
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="edit" v-show="editShow">修改</el-button>
            <el-button @click="resetForm('classroomForm')">重置</el-button>

        </el-footer>
    </d2-container>
</template>

<script>
    import request from "@/plugin/axios";
    import {mapState} from "vuex";

    export default {
        data() {
            return {
                formRules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    studentId: [
                        {required: true, message: '请输入学号', trigger: 'change'}
                    ],
                    gender: [
                        {required: true, message: '请选择学生性别', trigger: 'change'}
                    ],
                    age: [
                        {required: true, message: '请输入家长年龄', trigger: 'change'},
                        {type: 'number', min: 5, max: 100, message: '年龄范围在5-100之间', trigger: 'change'}

                    ],
                    school: [
                        {required: true, message: '请选择所在校区', trigger: 'change'}
                    ],
                    payType: [
                        {required: true, message: '请选择付费类型', trigger: 'change'}
                    ],
                    cellphone: [
                        {required: true, message: '手机号不能为空', trigger: 'change'},
                        {type: 'number', message: '请输入11位合法手机号', trigger: 'change'}

                    ],
                    birthday: [
                        {type: 'date', required: true, message: '请选择出生日期', trigger: 'blur'}
                    ],

                    room: [
                        {required: true, message: '请输入教室', trigger: 'change'}
                    ],
                    studentLimit: [
                        {required: true, message: '限制人数不能为空', trigger: 'change'},
                        {type: 'number', message: '请输入数字', trigger: 'change'}

                    ],

                },
                editShow: false,
                disabled: false,
                schoolList: [],
                id: undefined,

                classroomForm: {
                    name: undefined,
                    school: undefined,
                    room: undefined,
                    studentLimit: undefined,

                }
            };
        },
        computed: {
            ...mapState('d2admin/user', ['info']),
        },
        methods: {
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            submit() {
                let data = {};
                data.name = this.classroomForm.name
                data.room = this.classroomForm.room
                data.studentLimit = this.classroomForm.studentLimit
                data.school = this.classroomForm.school
                let url = "/classroom/addClassroom";
                if (this.id != undefined) {
                    data.classroom = this.id;
                    url = "/classroom/updateClassroom";
                }
                data.name = this.classroomForm.name
                data.room = this.classroomForm.room
                data.studentLimit = this.classroomForm.studentLimit
                data.school = this.classroomForm.school
                request({
                    url: url,
                    method: "post",
                    data
                }).then(res => {
                    if (res.code == 200) {
                        this.refresh = true
                        this.classroomForm = {}
                        this.$router.push({path: "/classroom-list"})

                        this.$alert("", "提交成功", {
                            confirmButtonText: "确定"
                        });
                    }
                    // 返回数据
                });
            },
            edit() {
                this.disabled = false;
            },
            getSchoolList() {
                this.schoolList = this.info.school;
            },
            getClassroomOne(id) {
                request({
                    url: "/classroom/getClassroomOne",
                    method: "post",
                    data: {id: id}
                })
                    .then(res => {
                        this.id = res.data._id;
                        this.classroomForm.name = res.data.name;
                        this.classroomForm.school = res.data.school;
                        this.classroomForm.studentLimit = res.data.number;
                        this.classroomForm.room = res.data.room;
                    })
                    .then(res => {
                    });
            }
        },
                beforeRouteLeave(to,from,next){
        if (this.refresh){
          to.meta.refresh = 'a'
          this.refresh = undefined
        }
        if (this.$route.query.id == undefined){
            from.meta.keep = true
            from.meta.classroomForm = this.classroomForm
        }

        next()
        },
        beforeRouteEnter(to,from,next){
            if (to.meta.keep){
                to.meta.keep = undefined
                next(v=>{
                  v.classroomForm = to.meta.classroomForm
                  to.meta.classroomForm = undefined
                  to.meta.keep = undefined
                })
            }
            else{
                next()
            }

        },
        created() {
            if (this.$route.query.id != undefined) {
                this.editShow = true;
                this.disabled = true;
                this.getClassroomOne(this.$route.query.id);
            }
            this.school = this.info.school[0]._id
            this.classroomForm.school = this.school
            this.getSchoolList();
        }
    };
</script>
